<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件详解</title>
</head>
<body>
<div id="seven_component">
    <my-component>

    </my-component>

</div>

<div id="part_component">
    <part-component>

    </part-component>

</div>
<!--演示table,
  Vue的组件模板在某些情况下会受到HTML的限制，比如table内规定只能使用<tr><td><th>。
  在table中直接使用组件是无效的。这种情况下，可以使用特殊的is 属性去挂载组件。
  -->
<div id="app_table">
    <table>
        <tbody is="table-component"></tbody>
    </table>
</div>

<div id="app_other">
    <other_template></other_template>
    <other_template></other_template>
</div>

<div id="app_other1">
    <other_template1></other_template1>
    <other_template1></other_template1>
    <other_template1></other_template1>
</div>

<!-- 组件间的通信 props与data的区别是，props接收的是父组件的参数，data是组件自己的参数-->
<div id="props-communication">
    <my-communication communication-message="来自父组件的message"></my-communication>

</div>

<div id="props-communication1">
    <input type="text" v-model="super_message">
    <my-communication1 :communication-message1="super_message"></my-communication1>

</div>
<!-- 将script放到body后加载 -->
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
    Vue.component('my-communication1', {
        props: ['communicationMessage1'],
        template: '<div>子组件的内容为:{{communicationMessage1}}</div>'
    })
    new Vue({
        el: '#props-communication1',
        data:{
            super_message:'dadsa'
        }
    })


    Vue.component('my-communication', {
        props: ['communicationMessage'],
        template: '<div>{{communicationMessage}}</div>'
    })
    new Vue({
        el: '#props-communication',
    })

    let other_data = {
        count: 0
    }
    Vue.component('other_template', {
        template: '<div><button @click="count++">{{count}}</button></div>',
        data: function () {
            return {
                count: 0
            }
        }
    })
    let app_other = new Vue({
        el: '#app_other'
    })
    Vue.component('other_template1', {
        template: '<div><button @click="count++">{{count}}</button></div>',
        data: function () {
            return other_data
        }
    })
    new Vue({
        el: '#app_other1'
    })

    Vue.component('my-component', {
        template: '<div>这里是组件的内容</div>'

    })

    new Vue({
        el: '#seven_component'
    })
    let table_component = {template: '<p>这是一个局部组件</p>'}
    let part_component = {template: '<p>这是一个局部组件</p>'}
    new Vue({
        el: '#part_component',
        components: {
            'part-component': part_component
        }
    })
    new Vue({
        el: '#app_table',
        components: {
            'table-component': table_component
        }
    })
</script>
</body>
</html>